<!--
 * @Descripttion: 详情弹框(查看、编辑、删除)
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-07-11 10:57:05
-->
<template>
  <el-form
    ref="form3"
    :model="form"
    label-width="120px"
    label-position="right"
    class="form-wrapper"
    :disabled="status === 'r'"
  >

    <template v-for="item in form.roomTypeFacilities">
      <allCheckbox
        :title='item.groupName'
        :list.sync="item.itemList"
      ></allCheckbox>
    </template>

    <h2>其他</h2>
    <dl>
      <dd class="pd">
        <dynamic-tag
          v-model="form.otherFacilities"
          :count="20"
          :maxlength="12"
        />
      </dd>
    </dl>
  </el-form>
</template>

<script>
import { otherRoutes } from "@/router";
import settings from "@/store/modules/settings";
import allCheckbox from "./all-checkbox";
import { DynamicTag } from 'dynamic-tag'
export default {
  components: { allCheckbox ,DynamicTag },
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
    status: {
      type: String,
      required: true,
    },
    parentShow: {
      type: Boolean,
      required: false,
    },
  },
  watch: {
    parentShow: {
      handler(nv, ov) {
        this.init();
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      // 默认字典配置
      options: [],
    };
  },
  methods: {
    async init() {
      this.form.otherFacilities || this.$set(this.form, "otherFacilities", []);

      if (!this.form.roomTypeFacilities) {
        await this.queryAllFacilities();
        this.$set(this.form, "roomTypeFacilities", this.options);
      }
    },

    /**
     * 获取所有设备设施类型
     * @return Void
     */
    async queryAllFacilities() {
      return this.$POST("sot-admin-api/hotel/self/roomTypeInfo/facilitiesForSelect").then(
        ({ data }) => {
          this.options = data;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  h2 {
    font-size: 16px;
    font-weight: bold;
  }
  dl {
    margin-bottom: 28px;
    dt {
      background: #fafafa;
      padding: 15px 12px;
      border: 1px solid #f0f0f0;
      span {
        width: 33.33%;
        display: inline-block;
        text-align: left;
        font-size: 15px;
        font-weight: bold;
      }
    }
    dd {
      margin: 0;
      padding: 0;
      border-left: 1px solid #f0f0f0;
      :deep(.el-checkbox-group) {
        width: 100%;
        .el-checkbox {
          width: 33.33%;
          border-right: 1px solid #f0f0f0;
          border-bottom: 1px solid #f0f0f0;
          margin: 0;
          display: inline-block;
          box-sizing: border-box;
          padding: 14px 14px 14px 27px;
          border-collapse: collapse;
          text-align: center;
          .wrap {
            width: 180px;
          }
        }
      }
      &.pd {
        padding: 14px 14px 2px;
        border: 1px solid #f0f0f0;
      }
    }
  }
}
</style>
